.<template>
  <div>
      <div class="attrBar">
          <div class="left">
              <img :src="'http://liangwei.tech:3000'+data.head_img" alt="">
          </div>
          <div class="center">
              <p>{{data.username}}</p>
              <span>{{data.create_date.split('T')[0]}}</span>
          </div>
          <div class="right" @click="attrClick" >
              取消关注
          </div>
      </div>
  
  </div>
</template>

<script>
export default {
props:['data'],
methods: {
    attrClick(){
      this.$emit('attrClick')
        
    }
},
}
</script>


<style lang="less" scoped>

.attrBar{
    display: flex;
    align-items: center;
    padding: 4vw;
    border-bottom: 1px solid #d8d8d8;
    .left{
        background-color: #b3b3b3;
        width: 13.333vw;
        height: 13.333vw;
        border-radius: 50%;
        img{
            width: 100%;
        }
    }
    .center{
        padding-left: 2.667vw;
        flex: 1;
        display: flex;
        flex-direction: column;
        span{
            color: #949494;
            font-size: 2.133vw;
        }
    }
    .right{
        width: 26.667vw;
        height: 9.334vw;
        line-height: 9.334vw;
        border-radius: 5.333vw;
        background-color:#e1e1e1;
        text-align: center;
    }

}



</style>